<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好好吃商城</title>
<link type="text/css" href="css/css.css" rel="stylesheet" />
 <script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script src="js/wb.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
 <div class="mianCont" id="app">
  <div class="top">
   <span>您好！欢迎来到好好吃商城 </span>
   <span class="topRight">
    <a href="vip.html">好好吃</a>&nbsp;|
    <a href="order.html">我的订单</a>&nbsp;| 
    <a href="vip.html">会员中心</a>&nbsp;|
    <a href="#">联系我们</a>
   </span>
  </div><!--top/-->
  <div class="lsg">
   <h1 class="logo"><a href="index.html"><img src="img/logo.png" width="217" height="90" /></a></h1>

   <div class="gouwuche">
    <div class="gouCar">
     <img src="img/gouimg.png" width="19" height="20" style="position:relative;top:6px;" />&nbsp;|&nbsp;
     <strong class="red">{{dod.length}}</strong>&nbsp;件&nbsp;|
     <strong class="red">￥ {{tot}}元</strong>
     <a href="order.html">去结算</a> <img src="img/youjian.jpg" width="5" height="8" />
    </div><!--gouCar/-->
    <div class="myChunlv">
     <a href="vip.html"><img src="img/mychunlv.jpg" width="112" height="34" /></a>
    </div><!--myChunlv/-->
   </div><!--gouwuche/-->
  </div><!--lsg/-->
  <div class="pnt">
   <div class="pntLeft">
    <h2 class="Title">所有商品分类

    </h2>
   </div><!--pntLeft/-->
   <div class="pntRight">
    <ul class="nav">
     <div class="chilInPorNav" >
      <a href="#" v-for="item in goods"@click="gooou(item.id)">{{item.goodsName}}</a>
     </div>
     <div class="clears"></div>
     <div class="phone">TEL：021-12345678</div>
     <div class="phon">本页面所有商品均为促销商品</div>
    </ul><!--nav/-->
   </div><!--pntRight/-->
   <div class="clears"></div>
  </div><!--pnt/-->
  <div class="positions">
   当前位置：<a href="index.html">首页</a> &gt; <a href="#" class="posCur">商品中心</a>
  </div><!--positions/-->
  <div class="cont">
  <div class="jilu">

   </div><!--jilu/-->

   <div class="contRight">
    <div class="frProList">
     <dl v-for="item in goods"@click="gooou(item.id)">
      <dt><a href="proinfo.html"><img  v-bind:src="item.goodsImg" width="132" height="129" /></a></dt>

      <dd>{{item.goodsDetails}}</dd>
      <dd class="cheng">价格：{{item.goodsPrice}}</dd>

     </dl>
      <div class="clears"></div>
     </div><!--frProList-->
   </div><!--contRight/-->
   <div class="clears"></div>
  </div><!--cont/-->
  <div class="inHelp">
   <div class="inHLeft">
    <h4>帮助中心</h4>
    <ul class="inHeList">
     <li><a href="help.html">购物指南</a></li>
     <li><a href="help.html">支付方式</a></li>
     <li><a href="help.html">售后服务</a></li>
     <li><a href="#">企业简介</a></li>
     <div class="clears"></div>
    </ul><!--inHeList/-->
   </div><!--inHLeft/-->
   <div class="inHLeft">
    <h4>会员服务</h4>
    <ul class="inHeList">
     <li><a href="reg.html">会员注册</a></li>
     <li><a href="login.html">会员登录</a></li>
     <li><a href="order.html">购物车</a></li>
     <li><a href="order.html">我的订单</a></li>
     <div class="clears"></div>
    </ul><!--inHeList/-->
   </div><!--inHLeft/-->
   <div class="inHRight">
    <h4>全国统一免费服务热线</h4>
    <div class="telBox">400-0000-0000</div>
    <div class="weibo">

    </div>
   </div><!--inHRight/-->
   <div class="clears"></div>
  </div><!--inHelp/-->
  <div class="footer">
   <p>
   <a href="#">进入好好吃官网</a>&nbsp;|&nbsp;
   <a href="index.html">商城首页</a>&nbsp;|&nbsp;
   <a href="product.html">商品中心</a>&nbsp;|&nbsp;
   <a href="order.html">我的订单</a>&nbsp;|&nbsp;
   <a href="#">新闻动态</a>&nbsp;|&nbsp;
   <a href="vip.html">会员中心</a>&nbsp;|&nbsp;
   <a href="help.html">帮助中心</a>
   </p>
   <p>
    版权所有：好好吃有限公司 版权所有  Copyright 2010-2015   ICP备00000000号
   </p>
  </div><!--footer/-->
 </div><!--mianCont/-->

 <script type="text/javascript" src="js/config.js"></script>
 <script type="text/javascript"src="js/jquery.cookie.js"></script>
 <script type="text/javascript">


  var app=new Vue({
   el:"#app",
   data:{
    goods:[],
    dod:[],
    tot:0
   },
   methods:{
    gooou(id){
     $.cookie('name', id,{path:'/proinfo.html'});
     $(window).attr('location', 'proinfo.html');

    }
   }
  })
  //加载页面自动执行
  $(document).ready(function () {
   $.ajax({
    url:config.GOODS_GETALL,
    type:"post",
    dataType:"json",
    data:{
    },
    success:function (data) {
     app.goods=data.data
     // if (data.data.type="零食"){
     //  app.goods=data.data
     // }else {
     //  app.goods2=data.data
     // }

    }

   })
   name = $.cookie('name');
   //购物车查询
   $.ajax({
    url: config.CAR_GETBYXH,
    type: "post",
    dataType: "json",
    data: {
     "userXh": name

    },
    success: function (data) {
     app.dod = data.data
     for (i = 0; i < app.dod.length; i++) {
      app.tot = app.tot + parseInt(app.dod[i].goodsPrice) * parseInt(app.dod[i].carNum)

     }
    }

   })


  })

 </script>
</body>
</html>
